<template>
  <div>
    <div class="container">
      <div class="muise-list">
        <div class="muise-list-title">
          <div class="muise-list-title-content" @click="handleTitle">
            <div
              :class="listShow == 1 ? 'muise-list-title-actvie' : 'muise-list-title-text'"
            >
              播放列表
              <div
                :class="listShow == 1 ? 'muise-list-title-text-actvie' : 'text-style'"
              ></div>
            </div>
            <div
              :class="listShow == 2 ? 'muise-list-title-actvie' : 'muise-list-title-text'"
            >
              我的收藏
              <div
                :class="listShow == 2 ? 'muise-list-title-text-actvie' : 'text-style'"
              ></div>
            </div>
            <div
              :class="listShow == 3 ? 'muise-list-title-actvie' : 'muise-list-title-text'"
            >
              自建歌单
              <div
                :class="listShow == 3 ? 'muise-list-title-text-actvie' : 'text-style'"
              ></div>
            </div>
            <div
              :class="listShow == 4 ? 'muise-list-title-actvie' : 'muise-list-title-text'"
            >
              已购歌曲
              <div
                :class="listShow == 4 ? 'muise-list-title-text-actvie' : 'text-style'"
              ></div>
            </div>
          </div>
          <button v-if="listShow === 1" class="muise-list-title-button">
            <i class="iconfont icon-24gf-playlistMusic"></i> 批量操作
          </button>
          <button
            v-if="(listShow === 2 || listShow === 4) && listSongShow === 1"
            class="muise-list-title-button2"
          >
            <i class="iconfont icon-bofang"></i> 播放全部
          </button>
        </div>
        <div class="muise-list-content">
          <div class="muise-list-content-item" v-if="listShow == 1">
            <SongList :PlayerList="PlayerList" />
          </div>
          <div class="muise-list-content-item-active" v-if="listShow == 2">
            <div class="muise-list-content-item-list" @click="handleSong">
              <div
                :class="
                  listSongShow == 1
                    ? 'muise-list-content-item-list-text-actvie'
                    : 'muise-list-content-item-list-text'
                "
              >
                单曲
              </div>
              <div
                :class="
                  listSongShow == 2
                    ? 'muise-list-content-item-list-text-actvie'
                    : 'muise-list-content-item-list-text'
                "
              >
                专辑
              </div>
              <div
                :class="
                  listSongShow == 3
                    ? 'muise-list-content-item-list-text-actvie'
                    : 'muise-list-content-item-list-text'
                "
              >
                歌单
              </div>
              <div
                :class="
                  listSongShow == 4
                    ? 'muise-list-content-item-list-text-actvie'
                    : 'muise-list-content-item-list-text'
                "
              >
                艺人
              </div>
            </div>
            <div>
              <div v-if="listSongShow == 1">
                <SongList :PlayerList="PlayerList" />
              </div>
              <div v-if="listSongShow == 2">
                <SongImg :NewAlbum="NewAlbum" />
              </div>
              <div v-if="listSongShow == 3">
                <SongImg :recommendAlbum="recommendAlbum" />
              </div>
              <div v-if="listSongShow == 4">
                <SongImg :Sublist="Sublist" />
              </div>
            </div>
          </div>
          <div class="muise-list-content-item" v-if="listShow == 3">
            <div class="songsheet-list">
              <img
                class="songsheet-img"
                src="https://static1-music.taihe.com/client/img/54bb599.png"
                alt=""
              />
              <p class="songsheet-text">您还没有创建歌单</p>
            </div>
          </div>
          <div class="muise-list-content-item" v-if="listShow == 4">
            <div class="muise-list-content-title" @click="handleSong">
              <div
                :class="
                  listSongShow == 1
                    ? 'muise-list-content-item-list-text-actvie'
                    : 'muise-list-content-item-list-text'
                "
              >
                单曲
              </div>
              <div
                :class="
                  listSongShow == 2
                    ? 'muise-list-content-item-list-text-actvie'
                    : 'muise-list-content-item-list-text'
                "
              >
                专辑
              </div>
            </div>

            <div v-if="listSongShow === 2">
              <SongImg :NewAlbum="NewAlbum" />
            </div>
            <div v-else>
              <SongList :PlayerList="PlayerList" />
            </div>
          </div>
        </div>
        <div class="muise-list-info">
          <div></div>
        </div>
      </div>
      <!-- muise-text -->
      <ul class="muise-info">
        <img class="muise-img" :src="SongDetail.al.picUrl" alt="" />
        <li
          v-for="item in Lyric"
          :class="item.time == lyricAsync ? 'muise-text-lyric' : 'muise-text'"
          :key="item.time"
        >
          {{ item.text[1] }}
        </li>
      </ul>
    </div>
    <footer>
      <audio
        ref="refMis"
        :src="SongUrl"
        type="audio/mp3"
        @timeupdate="songTimeUpdate"
      ></audio>
      <div class="slider-demo-block">
        <ElSlider v-model="value" class="ElSlider" @change="updateSongTime"></ElSlider>
      </div>
      <div class="controller">
        <div class="preservation">
          <img class="preservation-img" :src="SongDetail.al.picUrl" alt="" />
          <p class="song-title">{{ SongDetail.al.name }}</p>
          <i class="iconfont icon-xihuan"></i>
          <i class="iconfont icon-xiazai"></i>
          <i class="iconfont icon-fenxiang"></i>
        </div>
        <div class="controller-paly">
          <i class="iconfont icon-shangyishou" @click="shangSong"></i>
          <i class="iconfont icon-bofang" @click="palySong" v-if="!isPlay"></i>
          <i class="iconfont icon-zanting" @click="palySong" v-else></i>
          <i class="iconfont icon-xiayishou" @click="xiaSong"></i>
        </div>
        <div class="adjust-song">
          <span>{{ dayjs(SongDetail.dt).format("mm:ss") }}</span>
          <i class="iconfont icon-24gl-repeat2" v-if="!loop" @click="updateLoop"></i>
          <i class="iconfont icon-danquxunhuan" v-else @click="updateLoop"></i>
          <i class="iconfont icon-24gf-volumeCross" v-if="muted" @click="updateMuted"></i>
          <i class="iconfont icon-24gf-volumeZero" v-else @click="updateMuted"></i>
          <ElSlider v-model="value2" class="ElSlider2" @change="volumeSize"></ElSlider>
        </div>
      </div>
    </footer>
  </div>
</template>

<script lang="ts">
import { computed, defineComponent, onMounted, watch } from "vue";
import dayjs from "dayjs";
import { useRoute } from "vue-router";
import SongList from "./songList/index.vue";
import SongImg from "./SongImg/index.vue";
import { ElSlider } from "element-plus";
import {
  getSongLikeList,
  getSongDetail,
  getAlbumNewest,
  getRecommend,
  getSublist,
  getLyric,
  getSongUrl,
} from "../../api/Player/Player";
export default defineComponent({
  name: "App",
});
</script>
<script lang="ts" setup>
import { ref } from "vue";
import { useRoute } from "vue-router";
const activeName = "User";
const listShow = ref(1);
const listSongShow = ref(1);
const value = ref(0);
const value2 = ref(30);
const SongUrl = ref();
const refMis = ref();
const isPlay = ref(false);
const loop = ref(false);
const muted = ref(false);
const lyricAsync = ref();

const Album = ref([]);
const PlayerList = ref([]);
const NewAlbum = ref([]);
const recommendAlbum = ref([]);
const Sublist = ref([]);
const Lyric = ref([]);

let SongIndex = ref(0);
let SongId = ref();

const SongDetail = ref({
  al: {
    name: "",
    picUrl: "",
  },
});

// 控制播放
const palySong = () => {
  isPlay.value = !isPlay.value;
  if (isPlay.value) {
    refMis.value.play();
  } else {
    refMis.value.pause();
  }
};

function handleTitle(e) {
  if (e.target.outerText == "播放列表") {
    listShow.value = 1;
  } else if (e.target.outerText == "我的收藏") {
    listShow.value = 2;
  } else if (e.target.outerText == "自建歌单") {
    listShow.value = 3;
  } else if (e.target.outerText == "已购歌曲") {
    listShow.value = 4;
  }
}
function handleSong(e) {
  console.log(e.target.outerText);

  if (e.target.outerText == "单曲") {
    listSongShow.value = 1;
  } else if (e.target.outerText == "专辑") {
    listSongShow.value = 2;
  } else if (e.target.outerText == "歌单") {
    listSongShow.value = 3;
  } else if (e.target.outerText == "艺人") {
    listSongShow.value = 4;
  }
}

onMounted(async () => {
  // 接收路由参数
  const route = useRoute();
  const result = await getSongLikeList({
    uid: 6321736443,
  });
  Album.value = result.data;
  let AlbumList = Array.from(Album.value.ids);
  const result2: any = await getSongDetail(AlbumList.join(","));
  PlayerList.value = result2.data.songs;
  SongId.value = route.params.id || PlayerList.value[SongIndex.value].id;

  const result3 = await getAlbumNewest();
  NewAlbum.value = result3.data.albums;

  const result4 = await getRecommend();
  recommendAlbum.value = result4.data.recommend;

  const result5 = await getSublist();
  Sublist.value = result5.data.data;

  const result6 = await getSongDetail(SongId.value);
  SongDetail.value = result6.data.songs[0];

  const result8 = await getSongUrl(SongId.value);
  SongUrl.value = result8.data.data[0].url;
});

const shangSong = async () => {
  refMis.value.play().then(async () => {
    isPlay.value = true;
    if (SongIndex.value === 0) {
      SongIndex.value = PlayerList.value.length - 1;
    } else {
      SongIndex.value = SongIndex.value - 1;
    }
    SongId.value = PlayerList.value[SongIndex.value].id;
  });
};
const xiaSong = async () => {
  isPlay.value = true;
  if (SongIndex.value === PlayerList.value.length - 1) {
    SongIndex.value = 0;
  } else {
    SongIndex.value = SongIndex.value + 1;
  }
  SongId.value = PlayerList.value[SongIndex.value].id;
};
const updateLoop = () => {
  loop.value = !loop.value;
  if (loop.value) {
    refMis.value.setAttribute("loop", "loop");
  } else {
    refMis.value.removeAttribute("loop");
  }
};
const updateMuted = () => {
  muted.value = !muted.value;
  if (muted.value) {
    refMis.value.muted = true;
  } else {
    refMis.value.muted = false;
  }
};
const updateSongTime = () => {
  refMis.value.currentTime = (value.value / 100) * refMis.value.duration;
};
const volumeSize = () => {
  refMis.value.volume = value2.value / 100;
};
watch(
  () => SongId.value,
  async () => {
    const result8 = await getSongUrl(SongId.value);
    SongUrl.value = result8.data.data[0].url;
    const result6 = await getSongDetail(SongId.value);
    SongDetail.value = result6.data.songs[0];
    const result7 = await getLyric(SongId.value);
    const lyric = result7.data.lrc.lyric.split("\n").toString();
    const LyricItem = result7.data.lrc.lyric.split("\n").map((item) => {
      return {
        time: item.substr(1, 5),
        text: item
          .split("\n")
          .toString()
          .split(/\[\d{2}\:\d{2}\.\d{3}\]/),
      };
    });
    Lyric.value = LyricItem;
    refMis.value.play();
  },
  { deep: true }
);

const songTimeUpdate = () => {
  value.value = (refMis.value.currentTime / refMis.value.duration) * 100;
  lyricAsync.value = dayjs(refMis.value.currentTime * 1000).format("mm:ss");
  console.log(lyricAsync.value);
};
</script>
<style scoped>
* {
  padding: 0;
  margin: 0;
}
.nav {
  width: 1200px;
  height: 80px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav-logo {
  width: 120px;
  height: 40px;
  line-height: 80px;
}
.nav-search {
  width: 455px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 20px;
}
.nav-search-content {
  position: relative;
  border-radius: 20px;
  width: 255px;
  height: 40px;
  padding: 0 50px 0 15px;
  border-radius: 20px;
  background-color: #f8f8f8;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav-search-input {
  width: 100%;
  padding-left: 15px;
  border: none;
  color: #c0c4cc;
  background-color: #f8f8f8;
  outline: none;
}
.nav-search-input::-webkit-input-placeholder {
  color: #cac3c3;
}
.icon-sousuo {
  position: absolute;
  right: 20px;
  font-size: 20px;
  color: #cac3c3;
}
.nav-username {
  margin-right: 22px;
  color: #cac3c3;
}
/* container 开始 */
.container {
  padding-top: 20px;
  width: 1200px;
  margin: 0 auto;
  height: calc(100vh - 80px - 80px - 20px);
  display: flex;
  justify-content: space-between;
  overflow: hidden;
}
.muise-info {
  width: 300px;
  height: 485px;
  list-style: none;
  text-align: center;
  overflow: hidden;
}
.muise-img {
  width: 200px;
  height: 200px;
  margin-bottom: 4px;
}
.muise-text {
  color: #c0c4cc;
  line-height: 28px;
}
.muise-text-lyric {
  color: red;
  line-height: 28px;
}
.muise-list {
  width: 900px;
}
.muise-list-content {
  color: red !;
}
.muise-list-title {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}
.muise-list-title-text {
  width: 120px;
  text-align: center;
  color: #cac3c3;
}
.muise-list-title-text:hover .text-style {
  margin: 0 auto;
  width: 20px;
  height: 5px;
  color: #000;
  border-bottom: 1px solid;
}
.muise-list-title-text-actvie {
  margin: 0 auto;
  width: 20px;
  height: 5px;
  color: #000;
  border-bottom: 1px solid;
}
.muise-list-title-actvie {
  width: 120px;
  text-align: center;
  color: #000;
}
.muise-list-title-text:hover {
  color: #000;
  cursor: pointer;
}
.muise-list-title-content {
  display: flex;
}
.muise-list-content {
  width: 880px;
  height: 100%;
  position: relative;
}
.muise-list-content-item {
  position: absolute;

  width: 100%;
  height: 100%;
}

.muise-list-content-item-list {
  width: 880px;
  height: 28px;
  margin-bottom: 30px;
  display: flex;
}
.muise-list-content-item-list-text {
  width: 100px;
  height: 28px;
  margin-right: 20px;
  background-color: #0504040a;
  text-align: center;
  line-height: 28px;
  border-radius: 14px;
}
.muise-list-content-item-list-text:hover {
  background-color: red;
  color: white !important;
  cursor: pointer;
}
.muise-list-content-item-list-text-actvie {
  width: 100px;
  height: 28px;
  margin-right: 20px;
  text-align: center;
  line-height: 28px;
  border-radius: 14px;
  background-color: red;
  color: white !important;
  cursor: pointer;
}

/* 歌单 */
.sheet {
  width: 880px;
  display: flex;
  flex-wrap: wrap;
}
.sheet-item {
  width: 180px;
  height: 240px;
  margin: 0 30px 50px 0;
}
.sheet-img {
  width: 150px;
  height: 150px;
  border-radius: 10px;
}
.sheet-title {
  font-size: 16px;
  color: #333;
  margin-top: 15px;
}
.sheet-text {
  color: #909399;
  font-size: 14px;
}
/* 艺人 */
.artist {
  width: 880px;
  display: flex;
  flex-wrap: wrap;
}
.artist-item {
  width: 180px;
  height: 240px;
  margin: 0 30px 50px 0;
}
.artist-img {
  width: 150px;
  height: 150px;
  border-radius: 10px;
}
.artist-title {
  font-size: 16px;
  color: #333;
  margin-top: 15px;
}
.artist-text {
  color: #909399;
  font-size: 14px;
}
.muise-list-title-button {
  color: #606266;
  width: 114px;
  height: 32px;
  background-color: #f6f7f8;
  font-size: 13px;
  border: none;
}
.muise-list-title-button2 {
  color: white;
  width: 114px;
  height: 32px;
  background-color: #ee0e0e;
  font-size: 13px;
  border: none;
}
.icon-24gf-playlistMusic,
.icon-bofang,
.icon-zanting {
  margin: 5px;
}
.songsheet-list {
  width: 843.2px;
  height: 192px;
  padding: 30px 0;
}
.songsheet-text {
  color: #909399;
  font-size: 12px;
  margin-top: 10px;
  text-align: center;
}
.muise-list-content-title {
  display: flex;
}
.songsheet-img {
  display: block;
  margin: 0 auto;
}
footer {
  width: 100vw;
  height: 120px;
  position: absolute;
  bottom: 0px;
  overflow: hidden;
  background-color: white;
}

.controller {
  width: 1200px;
  height: 28px;
  padding: 26px 0;
  margin: 0 auto;
  display: flex;
  background-color: white;
}

.controller-paly {
  width: 300px;
  margin: 0 auto;
  height: 28px;
  display: flex;
  align-items: center;
}
.icon-shangyishou,
.icon-xiayishou {
  font-size: 26px !important;
  width: 15px;
  height: 28px;
}
.controller-paly .icon-bofang,
.icon-zanting {
  display: block;
  font-size: 26px;
  width: 50px;
  height: 50px;
  background-color: red;
  color: white;
  border-radius: 50%;
  margin: 0 50px;
  line-height: 50px;
  text-align: center;
}

.preservation {
  width: 500px;
  display: flex;
  align-items: center;
}
.song-title {
  margin-right: 20px;
}
.preservation-img {
  width: 40px;
  height: 40px;
  margin-right: 20px;
}

.preservation .icon-xiazai,
.icon-xihuan,
.icon-fenxiang {
  margin-right: 20px;
  font-size: 20px;
}

.adjust-song {
  width: 300px;
  display: flex;
  align-items: center;
}
.adjust-song .icon-24gl-repeat2,
.icon-danquxunhuan {
  font-size: 20px;
  margin-left: 20px;
}
.adjust-song .icon-24gf-volumeCross,
.icon-24gf-volumeZero {
  font-size: 20px;
  margin-left: 20px;
}
.ElSlider2 {
  width: 120px;
  margin-bottom: 8px;
}
.el-slider__runway {
  margin: 10px 0 0 0 !important;
}
</style>
